<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view class="main-section" v-if="!loading">
			<!--用户和成绩信息-->
			<view class="paper-public-info">
				<view class="result-info">
					<view class="score">
						<view class="title">考试成绩</view>
						<view class="value">{{record.score}}</view>
					</view>
					<view class="total-time">
						<view class="title">答题时间</view>
						<view class="value">{{record.total_time_str}}</view>
					</view>
				</view>
			</view>
			<swiper class="swiper" :style="{height:swiperHeight+'px'}" @change="changeSwiper" :current="currentIndex">
				<swiper-item class="swiper-item" v-for="(item,index) in questionsList" :key="index">
					<view class="item" :id="'swiper_item_' + index">
						<view class="test-con">
							<view class="type">
								<text class="type-str">{{item.question.type_str}}</text>
							</view>
							<view class="question">
								<text class="index">{{item.index}}</text>
								<text class="point">.</text>
								<text class="con">{{item.question.question}}</text>
							</view>
							
							<view class="options">
								<template v-if="item.question.type == 1">
									<view class="option" 
									:class="[
										item.answer == opt.option?'active':'',
										item.question.answer == opt.option?'active':'',
										item.question.answer != opt.option && item.answer == opt.option?'error':'',
									]" 
									v-for="(opt,opt_index) in item.question.options" :key="opt_index" 
									>
										<text class="letter">
											{{opt.option}}
										</text>
										<text class="point">.</text>
										<text class="description">
											{{opt.description}}
										</text>
									</view>
								</template>
								
								<template v-if="item.question.type==2">
									<view class="option"
									:class="[
										item.answer.includes(opt.option)?'active':'', 
										item.question.answer.includes(opt.option)?'active':'',
										!item.question.answer.includes(opt.option) && item.answer.includes(opt.option)?'error':''
									]"
									v-for="(opt,opt_index) in item.question.options" 
									:key="opt_index" 
									>
										<text class="letter">
											{{opt.option}}
										</text>
										<text class="point">.</text>
										<text class="description">
											{{opt.description}}
										</text>
									</view>
								</template>
								
								<template v-if="item.question.type==3">
									<view class="option" :class="[
										item.answer == 1?'active':'',
										item.question.answer == 1?'active':'',
										item.question.answer != 1 && item.answer == 1?'error':'',
									]">
										<text class="description" >
											正确
										</text>
									</view>
									<view class="option" :class="[
										item.answer == 0?'active':'',
										item.question.answer == 0?'active':'',
										item.question.answer != 0 && item.answer == 0?'error':'',
									]">
										<text class="description">
											错误
										</text>
									</view>
								</template>
							</view>
						</view>
						
						<view class="answer-con">
							<view class="answer-section show">
								<view class="answer">
									<text class="title">正确答案</text>
									<template v-if="item.question.type == 3">
										<text class="value" v-if="item.question.answer==1">正确</text>
										<text class="value" v-if="item.question.answer==0">错误</text>
									</template>
									<template v-else>
										<text class="value">{{item.question.answer}}</text>
									</template>
								</view>
								<!--用户答案-->
								<view class="user-answer" :class="item.question.answer==item.answer?'right':'wrong'">
									<text class="title">您的答案</text>
									<template v-if="item.question.type == 3">
										<text class="value" v-if="item.answer==1">正确</text>
										<text class="value" v-if="item.answer==0">错误</text>
									</template>
									<template v-else>
										<text class="value">{{item.answer}}</text>
									</template>
									
								</view>
								<view class="explain" v-if="item.question.exp">
									<view class="title">
										试题解析
									</view>
									<view class="content">
										<rich-text :nodes="item.question.exp"></rich-text>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					
				</swiper-item>
			</swiper>
			
			<view class="paper-footer">
				<view class="items">
					<view class="item prev" @click="prevQuestion()">
						<view class="btn" :class="questionIndex==1?'disabled':''">
							上一题
						</view>
					</view>
					<view class="item number">
						<text class="now">{{questionIndex}}</text>/<text class="total">{{questionTotal}}</text>
					</view>
					<view class="item next" @click="nextQuestion()">
						<view class="btn" :class="questionIndex == questionTotal?'disabled':''">
							下一题
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '@/components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import Top from '../../common/top.vue'
	
	export default {
		components: {
			FullscreenLoading,
			Top,
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {},
				userInfo : {}, //用户数据
				data: {}, // 试卷数据
				questionsList: [], //试题列表
				currentIndex: 0, //当前swiper索引
				questionIndex: 1, //当前题目索引
				questionTotal: 0, //题目总数
				swiperHeight: 200, //当前swiper高度
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
				record: {}
				
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			let that = this
			this.getUrlParam()
			
			this.getData().then(res => {
				this.getQuestionsList().then(res => {
					
					this.$nextTick(() => {
						this.setSwiperHeight();
					});
					this.loading = false
				})
			})
			
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()

		},
		onShow() {
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			//获取url参数
			getUrlParam: function(){
				// #ifdef MP-WEIXIN
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// #endif
			
				// #ifdef H5
				let curParam = this.$route.query;
				// #endif
				this.urlParams = curParam
			},
			/**
			 * 获取课程详情数据
			 */
			getData: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.id = params.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/exam'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/paper'
						data.m = 'muu_classroom_plugin_exam'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								uni.setNavigationBarTitle({
								　　title:res.data.data.title
								})
							}
							resolve(res.data)
						}
					})
				})
			},
			
			
			/**
			 * 获取试题列表数据
			 */
			getQuestionsList: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'record'
						data.id = this.data.exam.id

					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/exam'
						data.m = 'muu_classroom'
						//#endif
						//#ifdef H5
						url = 'entry/site/paper'
						data.m = 'muu_classroom_plugin_exam'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.record = res.data.data
								that.questionsList = res.data.data.answer_list
								that.questionTotal = res.data.data.answer_list.length
							}
							resolve(res.data)
						}
					})
				})
			},

			//手动切换题目
			changeSwiper(e) {
				console.log(e)
				this.currentIndex = e.detail.current;
				this.questionIndex = this.currentIndex + 1
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			
			setSwiperHeight(){
				let that = this
				let element = "#swiper_item_" + this.currentIndex
				console.log(element)
				let query = uni.createSelectorQuery().in(this)
				query.select(element).boundingClientRect(res => {
					console.log(res)
					if (res) {
						that.swiperHeight = res.height
					}
				}).exec()
			},
			
			/**
			 * 上一题
			 */
			prevQuestion(){
				if(this.questionIndex > 1){
					this.currentIndex = this.currentIndex - 1
					this.questionIndex = this.questionIndex - 1
				}
			},
			/**
			 * 下一题
			 */
			nextQuestion(){
				if(this.questionIndex < this.questionTotal){
					this.currentIndex = this.currentIndex + 1
					this.questionIndex = this.questionIndex + 1
				}
			},
			
			/**
			 * 生成用户答案数组
			 */
			createUserAnswer(){
				let that = this
				this.questionsList.forEach(function(v,k,arr){
					that.$set(that.userAnswer, k, {
						'qid' : v.question.id,
						'answer' : ''
					})
				})
				console.log(this.userAnswer)
			},
			
			/**
			 * 返回试题详情页
			 */
			backPaperDetail(){
				let pages = getCurrentPages() // 获取栈实例
				let prevPage = pages[pages.length - 2]
				if(prevPage !== undefined){
					uni.navigateBack()
				}else{
					let url = '../../index/index'
					uni.redirectTo({
						url: url
					});
				}
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
			},
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	.paper-public-info {
	
		.result-info {
			display: flex;
			padding-top: 5px;
			.score {
				flex: 1;
				text-align: center;
				background-color: #ff7444;
				color: #fff;
				margin: 0 5px;
				border-radius: 5px;
				padding: 5px 0;
			}
			.total-time {
				flex: 1;
				text-align: center;
				background-color: #47d1af;
				color: #fff;
				margin: 0 5px;
				border-radius: 5px;
				padding: 5px 0;
			}
		}
	}
	.test-con {
		padding: 20rpx;
		background-color:#fff;
		
		.type {
			display: block;
			.type-str {
				display: inline-block;
				background: #03b8cf;
				line-height: 32rpx;
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				color: #fff;
			}
		}
		.question {
			font-size:32rpx;color:#363636;
			margin: 20rpx 0;
			.index {
				
			}
			.con {
				font-size: 32rpx;
				line-height: 44rpx;
			}
		}
		.options {
			background-color:#fff;
			padding: 30rpx 0 0 0;
			.option {
				position: relative;
				font-size: 28rpx;
				padding: 20rpx;
				line-height: 44rpx;
				background:none repeat scroll 0 0 #f8f8f8;
				border: 2rpx solid #eee;
				margin-top:6rpx;
				list-style: none;
				border-radius: 10rpx;
				cursor:pointer;
				.letter {
					font-size:28rpx;
					font-weight:700;
				}
				.point {
					font-size: 28rpx;
					font-weight:700;
					margin: 0 6rpx;
				}
				.description {
					font-size: 28rpx;
					font-weight:700;
				}
				.error-icon {
					position: absolute;
					width: 20rpx;
					height: 20rpx;
				}
			}
			.active{
				background:#03b8cf;; 
				border:2rpx solid #03b8cf;; 
				color:#fff;
			}
			.error{
				background:#f8f8f8;
				border:2rpx solid #ff3300;
				color:#ff3300;
			}
		}
	}
	
	.answer-con {
		padding: 10px;
		background-color: #fff;
		.hidden {
			display: none;
		}
		.show {
			display: block;
		}
		.show-answer {
			.btn-show-answer {
				line-height: 20px;
				padding: 5px 10px;
				border: 1px solid #eee;
				background-color: #fff;
			}
		}

		.answer {
			margin-top: 10px;
			padding: 5px;
			line-height: 22px;
			color: #03b8cf;
			background-color: #c4f6fc;
			border-radius: 5px;
			.value {
				margin-left: 20rpx;
			}
		}
		.user-answer {
			margin-top: 10px;
			padding: 5px;
			line-height: 22px;
			color: #fff;
			background-color: #ff7444;
			border-radius: 5px;
			.value {
				margin-left: 20rpx;
			}
		}
		.user-answer.right {
			color: #03b8cf;
			background-color: #c4f6fc;
		}
		.explain {
			.title {
				font-size: 15px;
				line-height: 22px;
				color: #03b8cf;
				border-left: 3px solid #03b8cf;
				margin: 10px 0;
				margin-bottom: 20px;
				padding-left: 5px;
			}
			.content {
				color: #666;
				padding-bottom: 112rpx;
			}
		}
	}
	.paper-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 51px;
		border-top: 1px solid #f8f8f8;
		background-color: #fff;
		z-index: 9;
		.items {
			padding: 5px;
			line-height: 40px;
			font-size: 14px;
			display: flex;
			color: #666;
			.prev {
				flex: 1;
				text-align: center;
				padding: 0 20rpx;
				.btn {
					background-color: #c4f6fc;
					color: #03b8cf;
					margin: 0;
				}
			}
			  
			.next {
				flex: 1;
				text-align: center;
				padding: 0 20rpx;
				.btn {
					background-color: #03b8cf;
					margin: 0;
					color: #fff;
				}
			}
		
			.number {
				width: 120rpx;
				text-align: center;
				background-color: #f8f8f8;
				border-radius: 6px;
			}
		
			.btn {
				padding: 10rpx 0;
				border: 0;
				font-size: 32rpx;
				line-height: 60rpx;
				border-radius: 6rpx;
			}
			.disabled {
				background-color: #eee!important;
				color: #999!important;
			}
		}
	}
	
	
	.Blue {
		.paper-top {
			color: $Blue;
			background-color: #c4f6fc;
		}
	
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: $Blue;
						}
					}
					.options {
						.option.active{
							background: $Blue;
							border:1px solid $Blue;
							color:#fff;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: $Blue;
					background-color: #c4f6fc;
				}
				.user-answer.right {
					color: $Blue;
					background-color: #c4f6fc;
				}
				.explain {
					.title {
						color: $Blue;
						border-left: 3px solid $Blue;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #c4f6fc;
						color: $Blue;
					}
				}
				.next {
					.btn {
						background-color: $Blue;
					}
				}
			}
		}
	}
	
	.Green {
		.paper-top  {
			color: $Green;
			background-color: #c3f7e0;
		}
	
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: $Green;
						}
					}
					.options {
						.option.active {
							background-color:$Green;
							border:2rpx solid $Green;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #00ce74;
					background-color: #c3f7e0;
				}
				.user-answer.right {
					color: #00ce74;
					background-color: #c3f7e0;
				}
				.explain {
					.title {
					  color: #00ce74;
					  border-left: 6rpx solid #00ce74;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #c3f7e0;
						color: #00ce74;
					}
				}
				.next {
					.btn {
						background-color: #00ce74;
					}
				}
			}
		}
	}
	
	.LightRed {
		.paper-top  {
			color: #B1331B;
			background-color: #fac6bb;
		}
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #B1331B;
						}
					}
					.options {
						.option.active {
							background-color:#B1331B;
							border:1px solid #B1331B;
						}
						.option.error{
							background:#f8f8f8;
							border:1px solid #ff3300;
							color:#ff3300;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #B1331B;
					background-color: #fac6bb;
				}
				.user-answer.right {
					color: #B1331B;
					background-color: #fac6bb;
				}
				.explain {
					.title {
						color: #B1331B;
						border-left: 3px solid #B1331B;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
					  background-color: #fac6bb;
					  color: #B1331B;
					}
				}
				.next {
					.btn {
					  background-color: #B1331B;
					}
				}
			}
		}
	}
	
	.Orange {
		.paper-top  {
			color: #ff6600;
			background-color: #f7ccb0;
		}
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #ff6600;
						}
					}
					.options {
						.option.active {
						  background-color:#ff6600;
						  border:2rpx solid #ff6600;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #ff6600;
					background-color: #f7ccb0;
				}
				.user-answer.right {
					color: #ff6600;
					background-color: #f7ccb0;
				}
				.explain {

					.title {
						color: #ff6600;
						border-left: 6rpx solid #ff6600;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #f7ccb0;
						color: #ff6600;
					}
				}
				.next {
					.btn {
						background-color: #ff6600;
					}
				}
			}
		}
	}
	
	.LightPink {
		.paper-top  {
			color: #F492A1;
			background-color: #f7ced4;
		}
	
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #F492A1;
						}
					}
					.options {
						.option.active {
						  background-color:#F492A1;
						  border:2rpx solid #F492A1;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #F492A1;
					background-color: #f7ced4;
				}
				.user-answer.right {
					color: #F492A1;
					background-color: #f7ced4;
				}
				.explain {
					.title {
						color: #F492A1;
						border-left: 3px solid #F492A1;
					}
				}
			}
		}
		
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #f7ced4;
						color: #F492A1;
					}
				}
				.next {
					.btn {
						background-color: #F492A1;
					}
				}
			}
		}
	}
	
	.Magenta {
		.paper-top  {
			color: #6F50A0;
			background-color: #ddcbfc;
		}
		.swiper-item {
			.test-con {
				.item {
					.type {
						.type-str {
							background: #6F50A0;
						}
					}
					.options {
						.option.active {
							background-color:#6F50A0;
							border:2rpx solid #6F50A0;
						}
					}
				}
			}
			.answer-con {
				.answer {
					color: #6F50A0;
					background-color: #ddcbfc;
				}
				.user-answer.right {
					color: #6F50A0;
					background-color: #ddcbfc;
				}
				.explain {
					.title {
						color: #6F50A0;
						border-left: 6rpx solid #6F50A0;
					}
				}
			}
		}
		.paper-footer {
			.items {
				.prev {
					.btn {
						background-color: #ddcbfc;
						color: #6F50A0;
					}
				}
				.next {
					.btn-next {
						background-color: #6F50A0;
						margin: 0;
					}
				}
			}
		}
	}
	
	
	
	/*交卷成功弹出框*/
	.submit-popover,.re-exam-popover {

		.submit-section {
			width: 500rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.title {
				text-align: center;
				padding: 20rpx 0;
			}
			.description {
				padding: 20rpx 0;
				text-align: center;
				color: #777;
			}
			.score {
				padding: 20rpx 0;
				text-align: center;
				.value {
					font-size: 64rpx;
					font-weight: 700;
				}
				.fen {

				}
			}
			.query {
				margin-top: 72rpx;
				button {
					color: #fff;
					border: 0;
				}
				.back-btn {
					color: #777;
					margin-bottom: 20rpx;
					border: 0;
				}
			}
		}
		
		.submit-section.no-pass {
			color: #777;
		}
	}
	
	/*风格样式*/
	.Blue {
		.submit-section {
			.query {
				.query-btn {
					background: $Blue;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Blue;
		}
	}
	.Green {
		.submit-section {
			.query {
				.query-btn {
					background: $Green;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Green;
		}
	}
	.LightRed {
		.submit-section {
			.query {
				.query-btn {
					background: $LightRed;
				}
			}
		}
		.submit-section.yes-pass {
			color: $LightRed;
		}
	}
	.Orange {
		.submit-section {
			.query {
				.query-btn {
					background: $Orange;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Orange;
		}
	}
	.LightPink {
		.submit-section {
			.query {
				.query-btn {
					background: $LightPink;
				}
			}
		}
		.submit-section.yes-pass {
			color: $LightPink;
		}
	}
	.Magenta {
		.submit-section {
			.query {
				.query-btn {
					background: $Magenta;
				}
			}
		}
		.submit-section.yes-pass {
			color: $Magenta;
		}
	}
</style>
